<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <link rel="stylesheet" href="../dist/style.css"> -->
</head>

<body>
    <div id="app">
    </div>
    <button onclick="clickFn()">切换视频源</button>

    <script src="../pack/videocomponent.umd.js"></script>
    <script>
        const videoPlayer = new window.svelteSdk.videocomponent({
            target: document.getElementById('app'),
            props: {
                projectName: "my-first-video",
                autoPlay: true,
                loadingType: 'ths',
                loadingText: '',
                title: '这是标题',
                src: 'https://playback-hw.myhithink.com/asset/692db5839445c66cb87072be005616e4/play_video/ec05dfba205197cc4c85765eafe57a62.mp4',
            },
        })
        videoPlayer.$on('loadstart', (data) => {
            console.log(data)
            console.log('loadstart')
        })
        videoPlayer.$on('durationchange', (data) => {
            console.log(data)

            console.log('durationchange')
        })
        videoPlayer.$on('loadedmetadata', (data) => {
            console.log(data)

            console.log('loadedmetadata')
        })
        videoPlayer.$on('loadeddata', (data) => {
            console.log(data)

            console.log('loadeddata')
        })
        videoPlayer.$on('progress', () => {
            // console.log('progress')
        })
        videoPlayer.$on('canplay', () => {
            console.log('canplays')
        })
        videoPlayer.$on('canplaythrough', () => {
            console.log('canplaythrough')
        })
        videoPlayer.$on('play', () => {
            console.log('play')
        })
        videoPlayer.$on('playing', () => {
            console.log('playing')
        })
        videoPlayer.$on('timeupdate', ({ detail }) => {
            // console.log(detail)
        })
        const clickFn = () => {
            videoPlayer.$$set({ src: 'https://playback-hw.myhithink.com/asset/d3ed55518c79166a0dee40f2d6d45572/play_video/0b5c7e62a42e6c3382ab4bc790f4d2ee.mp4' })
        }
    </script>
</body>

</html>